<!--  -->
<template>
  <div>
    <b-card overlay
        :img-src="source"
        img-alt="Card Image"
        text-variant="white"
        :title="title"
        :sub-title="subTitle">
        <p class="card-text">
            {{text}}
        </p>
    </b-card>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },

  props: {
    title: {
      type: String
    },
    subTitle: {
      type: String
    },
    text: {
      type: String
    },
    source: {
      type: String
    }
  },

  computed: {},

  methods: {}
}
</script>
<style lang='less' scoped>
  .card {
    .no-border;
    white-space: nowrap;
  }
  .card-img {
    border-radius: 0;
  }
  .card-body {
    padding: 8rem 0;
    @media @max768 {
      padding: .6rem;
    }
  }
  .card-title {
    font-size: 2rem;
    @media @max768 {
      .ft16;
    }
  }

  .card-subtitle {
    .ft12;
    .white;
  }

  .card-text {
    font-size: 1.5rem;
    @media @max768 {
      .ft14;
    }
  }
</style>
